<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" >
<title>Insert title here</title>
 <script  th:src="@{/js/jquery-1.8.3.min.js}"></script>
 <script  th:src="@{/js/echarts.js}"></script>
 
</head>
<body>
	<input type="button" value="显示" onclick="loadDrugs()"/>
	<div id="main2" style="width: 600px;height:400px;"></div>
	<script type="text/javascript">
    //图表
    var myChart = echarts.init(document.getElementById("main2"));
    function loadDrugs() {
    	myChart.clear();
    	myChart.showLoading({text: '正在努力的读取数据中...'});
        $.getJSON('/echarys/d2', function (data) {
        	var option = {
                    title: {
                        text: 'ECharts 入门示例'
                    },
                    tooltip: {},
                    legend: {
                        data:['销量']
                    },
                    xAxis: {
                        data: data.Xaxis
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        barWidth:20,
                        data: data.data,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#83bff6'},
                                        {offset: 0.5, color: '#188df0'},
                                        {offset: 1, color: '#188df0'}
                                    ]
                                )
                            }
                        },
                       markPoint: {
                    	   symbol:'pin',
                    	   symbolOffset:['0','0%'],
                    	   data: [ 
                    		   {type:'max',name:'最大值',symbol:'diamond',symbolSize:'30'},
                    		   {type:'min',name:'最小值'}
                    	   ]
                       },
                       markLine: {
                    	   data: [
                    		   {type:'average',name:'平均'}
                    	   ]
                       }
                    }]
                };
        	 myChart.setOption(option);
        	 myChart.hideLoading();
        });
       
    }
 </script>
</body>
</html>